<template>
  <div class="shopCart">
    <header>
      <h2>购物车---<button @click="appear">出现坦克</button><b>{{message}}</b></h2>
    </header>
    <main>
      <!-- 父传子               子传父  自定义事件 -->
      <Main :hiit="hiit" v-bind:name.sync="name" :content="cont" @clickFade="mainFade"/>
    </main>
    <footer>
      <Foot @click.native="protos"/>
    </footer>
  </div>
</template>

<script>
import Main from './component/main'
import Footer from './component/Footer.vue'
export default {
  components:{
    Main,
    Foot:Footer,
  },
  data(){
    return {
      hiit:"提示信息",
      cont:"你想知道吗？",
      name:"网嘿嘿",
      message:"小姐姐真好看"
    }
  },
  methods:{
    mainFade(val){
      this.cont=val;
    },
    protos(){
      confirm("原生事件!!你知道吗？？")
    },
    appear(){
      this.$bus.$emit("footerAppear","欢迎来到新世界")
    }
  }
}
</script>

<style lang="scss">
.shopCart{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  main{
    flex:1;
  }
  footer,header{
    height: 50px;
    background: coral;
    text-align: center;
    line-height: 50px;
  }
}
</style>